

import React, { Component } from "react";
import { Form, Input, Row, Col, Button, Select, Divider, DatePicker, Upload, Switch, Icon, Tooltip, message } from 'antd';
import SaasModal from '../../../../components/display/SaasModal';
import {InvoiceDetails,SaveInvoice} from '../../../../fetch/fetchApi';
import moment from 'moment';

const FormItem = Form.Item;
const createForm = Form.create;
const Search = Input.Search;
// const {TextArea} = Input;

class Invoice extends Component {
    constructor(props) {
        super(props);
        this.state = {
            refresh:0,
            DetailInfo:{
            },
        };
    }

    componentWillReceiveProps(nextProps){
        if(nextProps.visible&&nextProps.selectInfo.appkey&&nextProps.hasGetApi){
            console.log('nextProps.selectInfo.appke',nextProps.selectInfo.appkey);
            InvoiceDetails({appkey:nextProps.selectInfo.appkey}).then(response=>{
                let res=response.data;
                this.props.alreadyGet();
                if(res&&res.data){
                    this.setState({
                        DetailInfo:res.data,
                    },()=>{console.log(this.state.DetailInfo)})
                }else{
                    this.setState({
                        DetailInfo:{}
                    })
                }
            })
        }
    }


    handleSubmit =(e) => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (!!err) {
                return;
            }
            console.log('values.startInvoiceData',values.startInvoiceData);
            values.appkey=this.props.selectInfo.appkey;
            values.companyName=this.props.selectInfo.companyName;
            values.startInvoiceDate=values.startInvoiceDate.format('YYYY-MM-DD')
            SaveInvoice(values).then(response=>{
                console.log('response',response);
                let res=response.data
                if(res.data){
                    this.props.handleCancel();
                    message.success('新增成功');
                }
            })
        });
    };


    render() {
        const {getFieldDecorator} = this.props.form;
        const wrapper={
            xl:18
        };
        const config = {
            rules: [
                {
                    required: true,
                    message: "该项为必填项"
                }
            ]
        };
        const dateFormat = 'YYYY-MM-DD';
        const formItemLayout = {
            labelCol: {
              xl: { span: 4 },
              sm: { span:  8},
            },
            wrapperCol: {
              xl: { span: 20 },
              sm: { span: 16 },
            },
          };
          const tailFormItemLayout = {
            wrapperCol: {
              xl: {
                span: 20,
                offset: 4,
              },
            },
          };
        return(
            <SaasModal visible={this.props.visible} handleCancel={this.props.handleCancel} title={'开票配置'}>
                <form form={this.props.form}>
                    <Row gutter={4}>
                        <Col {...wrapper}>
                            <FormItem
                            label="开票启用"
                            {...formItemLayout}
                            >
                                {getFieldDecorator('startInvoiceDate',{...config,...{initialValue:this.state.DetailInfo.startInvoiceDate?moment(this.state.DetailInfo.startInvoiceDate,dateFormat):undefined}})(
                                    <DatePicker format={dateFormat} style={{width:'100%'}} placeholder={'选择时间'}/>
                                )}
                            </FormItem>
                        </Col>
                        <Col {...wrapper}>
                            <FormItem
                            label="开票限制"
                            {...formItemLayout}
                            >
                                {getFieldDecorator('invoiceLimit',{...config,...{initialValue:this.state.DetailInfo.invoiceLimit}})(
                                    <Search enterButton="个月内订单可开票"
                                  />
                                )}
                            </FormItem>
                        </Col>
                        <Col {...wrapper}>
                            <FormItem
                            {...tailFormItemLayout}
                            >
                                <Button style={{marginRight:4}} type="primary" htmlType="submit" onClick={this.handleSubmit}>{'保存配置'}</Button>
                            </FormItem>
                        </Col>
                    </Row>
                </form>
            </SaasModal>
        )
    }
}
Invoice = createForm()(Invoice);
export default Invoice;